<template>
  <a-card style="width: 100%; height: 100%">
    <template #title> <AppstoreTwoTone /> 分类管理 </template>
    <template #extra>
      <a-button @click="addClasses"> <PlusOutlined />添加分类</a-button>
    </template>
    <a-table
      :dataSource="dataSource"
      rowKey="id"
      :columns="columns"
      :pagination="false"
    >
      <template #action="{ record }">
        <a-space>
          <a-button type="primary" @click="editClasses(record)">
            <template #icon><EditOutlined /></template>
          </a-button>
          <a-button @click="deleteClasses(record.id)" danger>
            <template #icon><DeleteOutlined /></template>
          </a-button>
        </a-space>
      </template>
    </a-table>
  </a-card>
  <a-modal
    v-model:visible="visible"
    :title="isAdd ? '添加分类' : '编辑分类'"
    @ok="handleOk"
  >
    <input type="text" v-model="type.id" v-show="false" />
    <a-input v-model:value="type.name" placeholder="请输入分类名称" />
  </a-modal>
</template>

<script>
import { onMounted, reactive, ref, createVNode } from "vue";
import {
  reqAllClasses,
  reqAddClasses,
  reqUpdateClasses,
  reqDeleteClasses,
} from "../../../api";
import { message, Modal } from "ant-design-vue";
import {
  ExclamationCircleOutlined,
  AppstoreTwoTone,
  EditOutlined,
  DeleteOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";

// 表格中的分类逻辑
function useClasses() {
  const columns = [
    {
      title: "分类ID",
      dataIndex: "id",
    },
    {
      title: "分类名称",
      dataIndex: "name",
    },
    {
      title: "操作",
      key: "action",
      slots: {
        customRender: "action",
      },
    },
  ];

  const dataSource = ref([]);

  async function initClasses() {
    const { data } = await reqAllClasses();
    dataSource.value = data.items;
  }

  onMounted(() => {
    initClasses();
  });

  return {
    columns,
    dataSource,
    initClasses,
  };
}

// 模态框中的分类逻辑
function useClassesModal(initClasses) {
  const visible = ref(false);
  // 一个分类
  const type = reactive({});
  const isAdd = ref(false);

  const editClasses = (item) => {
    isAdd.value = false;
    visible.value = true;
    type.id = item.id;
    type.name = item.name;
  };

  const addClasses = () => {
    isAdd.value = true;
    visible.value = true;
    type.name = "";
  };

  // 发送异步请求添加分类
  async function toAddClasses() {
    const result = await reqAddClasses({ name: type.name });
    showMessage(result);
  }

  function showMessage(result) {
    if (result.success) {
      message.success(result.message);
      visible.value = false;
      initClasses();
    } else {
      message.error(result.message);
    }
  }

  // 发送编辑分类的请求
  async function toEditClasses() {
    const result = await reqUpdateClasses(type);
    showMessage(result);
  }

  const handleOk = () => {
    if (isAdd.value) {
      toAddClasses();
    } else {
      toEditClasses();
    }
  };

  return {
    visible,
    editClasses,
    addClasses,
    handleOk,
    type,
    isAdd,
  };
}

// 对话框中的分类逻辑
function useClassesDialog(initClasses) {
  function deleteClasses(id) {
    Modal.confirm({
      title: "确认删除该分类吗？",
      icon: createVNode(ExclamationCircleOutlined),
      content: "此操作不可撤销",
      okText: "Yes",
      okType: "danger",
      cancelText: "No",

      onOk() {
        toDeleteClasses(id);
      },

      onCancel() {
        message.info("已取消删除");
      },
    });
  }
  // 发送删除分类的请求
  async function toDeleteClasses(id) {
    const result = await reqDeleteClasses(id);
    if (result.success) {
      message.success(result.message);
      initClasses();
    } else {
      message.error(result.message);
    }
  }
  return {
    deleteClasses,
  };
}

export default {
  name: "Classes",
  components: {
    AppstoreTwoTone,
    EditOutlined,
    DeleteOutlined,
    PlusOutlined,
  },
  setup() {
    const { columns, dataSource, initClasses } = useClasses();

    return {
      columns,
      dataSource,
      ...useClassesModal(initClasses),
      ...useClassesDialog(initClasses),
    };
  },
};
</script>

<style>
</style>